
<template>
  <div class="about">
    <video-player ref="playerObj"></video-player>
    <a @click="playVideo">播放视频</a>
  </div>
</template>
<script>
  import VideoPlayer from '@/components/VideoPlayer1'
  export default {
    // name: 'about',
    components: {
      VideoPlayer
    },
    data() {
      return {}

    },
    methods: {
      playVideo() {
        this.$refs['playerObj'].videoSrc = 'rtmp://8.134.54.223:21935/hls/356802050202455'
        this.$refs['playerObj'].playerOptions.sources[0].src = 'rtmp://8.134.54.223:21935/hls/356802050202455'
      }
    }
  }
</script>

<style scoped lang="less">
  .video-js{
    width:50vw;
    height:80vh;
    /*;background: transparent;*/
    margin: auto !important;
    text-align: center !important;
    align-items: center !important;
    /*margin-top: 200px !important;*/
    .no-video{
      display:flex;
      width:50vw;
      height:80vh;
      font-size:45px;
      text-align:center;
      justify-content: center;
      align-items:center;
      margin: auto !important;
    }
  }
.mui-table-view{
  width: 100vw;
  height: 100vh;
  display: flex;
  /*background: red;*/
  align-items: center;
  justify-content: space-between;
  .mui-table-view-cell{
    width: 800px;
    height: 50%;
  }
}
</style>



